<template>
  <div id="app" v-bind:class="{ white:isWhite, grey:!isWhite}">
    <Top title="title"></Top>
    <router-view></router-view>
    <Bottom></Bottom>
    <Login></Login>
    <alert></alert>
    <loading v-model="loadShow"></loading>
  </div>
</template>

<script>
import Top from '@/components/Header/Header'
import Bottom from '@/components/Footer/Footer'
import Login from '@/components/Login/Login'
import Alert from '@/components/Alert/Alert'
import { Loading } from 'vux'
import { mapGetters } from 'vuex'
export default {
  name: 'app',
  computed: {
    ...mapGetters({
      loadShow: 'getShowLoad',
      isWhite: 'getBackground'
    })
  },
  components: {
    Top,
    Bottom,
    Login,
    Alert,
    Loading
  }
}
</script>

<style lang="less">
#app {
  font-family: -apple-system-font,Helvetica Neue,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}
#app.white{
  background-color: #ffffff;
}
#app.grey{
  background-color: #f5f5f5;
}
/*修改默认按钮样式*/
.btn-box{
  margin-top:20px;
  margin-bottom: 30px;
}
.btn.weui-btn_default{
  background-color:#0066CC;
  background: linear-gradient(left,#408bda,#2356fb);
  color:#fff;
  height: 50px;
  font-size: 20px;
}
.btn.weui-btn_default:not(.weui-btn_disabled):active{
  background-color:#3272ea;
  color:rgba(255,255,255,0.6);
}
.btn.weui-btn_disabled.weui-btn_default{
  background-color: #3a7fc3;
  color:rgba(255,255,255,0.6);
}
/*修改默认输入框样式*/
.form-box{
  padding: 0 10%;
  margin-top: 50px;
}
.input-defalut{
  margin:5px 0px;
  .weui-cells{
    margin-top: 12px;
    background-color: #f5f5f5;
    font-size: 18px;
  }
  .weui-cell{
    border: 1px solid #e1e1e1;
    padding:5px;
    height: 40px;
    border:1px solid #bebdbd;
  }
  .input-icon{
    display: block;
    margin-right: 7px;
    margin-top: 2px;
  }
  .phone{
    width:22px;
    height: 36px;
  }
  .password{
    width: 26px;
    height: 33px;
  }
  .name{
    width: 27px;
    height: 27px;
  }
  .card{
    width: 27px;
    height: 19px;
  }
  .code{
    width: 27px;
    height: 19px;
  }
  .store{
    width: 27px;
  }
  .survey{
    width: 27px;
  }
}

// 修改card的默认样式
#app .contract-box.weui-panel {
  margin-top: 15px;
  padding: 20px 0;
  .contract-title{
      text-align: center;
      font-size: 22px;
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 15px;
  }
  .contract-content{
    padding: 15px 20px;
    padding-bottom: 0;
    p{
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      font-size: 18px;
    }
    .contract-detail{
      color: #999999;
      width:50%;
    }
    .contract-id,.contract-name{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color:#000;
    }
  }
}

</style>
